<%@page import="org.apache.commons.lang3.time.DateUtils"%>
<%@page import="com.antexpress.util.DataUtil"%>
<%@page import="com.antexpress.pojo.Employee"%>
<%@page import="com.antexpress.common.Const"%>
<%@page import="com.antexpress.bean.Authentication"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Profile -- Ant Express</title>
        <link rel="shortcut icon" href="static/img/ant-logo.png">
        <link href="static/css/style.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/normalize.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/default.css" rel="stylesheet" type="text/css"/>
        <link href="static/dist/css/jquery.secretnav.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/demo.css" rel="stylesheet" type="text/css"/>
        <link href="static/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
        <link href="static/css/edbox.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <%
            if(!Authentication.isLogin(session)) {
                response.sendRedirect("index.jsp");
                return;
            }
            Employee emp = (Employee)session.getAttribute(Const.CURRENT_USER);
        %>
        <div class="sn-outer-wrapper sn-moveleft modalview">
            <div class="sn-content-wrapper transform" style="cursor: default;">
                <div id="content" style="top: 0px;">
                    <jsp:include page="ui/header.jsp"/>
                    <div class="container-nav">
                        <div class="container">
                            <button class="open btn btn-default bt-open" title="Menu"><i class="fa fa-bars" aria-hidden="true"></i></button>
                            <a href="#basicProfile" class="content-nav-bt">Basic Profile</a>
                            <a href="#position" class="content-nav-bt">Position</a>
                            <a href="#security" class="content-nav-bt">Security</a>
                        </div>
                    </div>
                    <div class="container" style="text-align: left;color: #000">
                        <h1 class="heading"><i class="fa fa-user" aria-hidden="true"></i> Your Profile</h1>
                        <div class="content-div">
                        <h4 id="basicProfile" class="subheading"><i class="fa fa-chevron-right" aria-hidden="true"></i> Basic Information</h4>
                        <form>
                        <table class="form-table">
                            <tr>
                                <td>Username</td>
                                <td><%=emp.getUsername()%></td>
                            </tr>
                            <tr>
                                <td>Name</td>
                                <td><input type="text" value="<%=emp.getName()%>" name="name" minlength="1" maxlength="50" class="input-md-width"/></td>
                            </tr>
                            <tr>
                                <td>Gender</td>
                                <td><%if(emp.getGender().equalsIgnoreCase("m")){%>
                                    <input id="input-gender-m" type="radio" checked="true" value="m" name="gender"/><label for="input-gender-m">Male</label>
                                    <input id="input-gender-f" type="radio" value="f" name="gender" style="margin-left: 20px;"/><label for="input-gender-f">Female</label>
                                    <%}else{%>
                                    <input id="input-gender-m" type="radio" value="m" name="gender"/><label for="input-gender-m">Male</label>
                                    <input id="input-gender-f" type="radio" value="f" name="gender" checked="true" style="margin-left: 20px;"/><label for="input-gender-f">Female</label>
                                    <%}%>
                                </td>
                            </tr>
                            <tr>
                                <td>Mobile</td>
                                <%
                                    String mobile = null;
                                    if(emp.getMobile()==null||emp.getMobile().equals(""))
                                        mobile = "";
                                    else
                                        mobile = emp.getMobile();
                                %>
                                <td><input type="text" name="mobile" value="<%=mobile%>" minlength="8" class="input-md-width"/></td>
                            </tr>
                            <tr>
                                <td>Email</td>
                                <%
                                    String email = null;
                                    if(emp.getEmail()==null||emp.getEmail().equals(""))
                                        email = "";
                                    else
                                        email = emp.getEmail();
                                %>
                                <td><input type="email" name="email" value="<%=email%>" maxlength="50" class="input-md-width"/></td>
                            </tr>
                            <tr>
                                <td>Birth</td>
                                <td><input type="date" name="birth" value="<%=DataUtil.getHtmlDate(emp.getBirth())%>" class="input-md-width"/></td>
                            </tr>
                            <tr>
                                <td><input id="update-profile" type="submit" class="btn btn-primary" value="Save"/></td>
                                <td><input type="reset" class="btn btn-default" value="Reset"/></td>
                            </tr>
                        </table>
                        </form>
                        <h4 id="position" class="subheading"><i class="fa fa-chevron-right" aria-hidden="true"></i> Position Information</h4>
                        <table class="form-table">
                            <tr>
                                <td>Department</td>
                                <td><%=emp.getTitle().getDepartment().getName()%></td>
                            </tr>
                            <tr>
                                <td>Title</td>
                                <td><%=emp.getTitle().getName()%></td>
                            </tr>
                            <tr>
                                <td>Salary</td>
                                <td><i class="fa fa-cny" aria-hidden="true"></i> <%=DataUtil.formatSalary(emp.getSalary())%> per month</td>
                            </tr>
                        </table>
                        <h4 id="security" class="subheading"><i class="fa fa-chevron-right" aria-hidden="true"></i> Change Password</h4>
                        <form>
                            <table class="form-table">
                                <tr>
                                    <td>Old Password</td>
                                    <td><input type="password" name="oldPassword" minlength="6" maxlength="12" class="input-md-width"/></td>
                                </tr>
                                <tr>
                                    <td>New Password</td>
                                    <td><input type="password" name="newPassword" minlength="6" maxlength="12" class="input-md-width"/></td>
                                </tr>
                                <tr>
                                    <td>Password Confirm</td>
                                    <td><input type="password" name="passwordConfirm" minlength="6" maxlength="12" class="input-md-width"/></td>
                                </tr>
                                <tr>
                                    <td><input id="update-password" type="submit" class="btn btn-primary" value="Save"/></td>
                                    <td><input type="reset" class="btn btn-default" value="Reset"/></td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    </div>
                </div>
            </div>
            <div class="sn-nav-wrapper">
                <nav id="nav" class="sn-nav left vertical">
                    <jsp:include page="ui/nav.jsp"/>
                </nav>
            </div>
        </div>
        <script src="static/js/modernizr.custom.25376.js" type="text/javascript"></script>
        <script src="static/js/jquery.js" type="text/javascript"></script>
        <script src="static/js/common-script.js" type="text/javascript"></script>
        <script src="static/dist/js/jquery.secretnav.js" type="text/javascript"></script>
        <script src="static/js/jquery.edbox.js" type="text/javascript"></script>
        <script>
            $(function() {
                menu();
            });
            
            $("#update-profile").click(function(check){
                check.preventDefault();
                $.ajax({
                    url: "${pageContext.request.contextPath}/emp/update_profile.do",
                    data: {
                        "name": $("input[name='name']").val(),
                        "gender": $("input[name='gender']:checked").val(),
                        "mobile": $("input[name='mobile']").val(),
                        "email":$("input[name='email']").val(),
                        "birth":new Date($("input[name='birth']").val())
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(result) {
                        if(result.status === 1) {
                            $.edbox({ success: 'Update success!' });
                            $("#head-empname-name").text("Hello, "+$("input[name='name']").val()+"!");
                            if($("input[name='gender']:checked").val()==='f'){
                                $("#head-avatar").attr("src","static/img/user_f.png");
                            }else{
                                $("#head-avatar").attr("src","static/img/user_m.png");
                            }
                        }else {
                            $.edbox({ warning: result.msg });
                        }
                    },
                    error: function() {
                        $.edbox({ danger: 'Save failed(Please check your brith)!' });
                    }
                });
            });
            
            $("#update-password").click(function(check){
                check.preventDefault();
                if($("input[name='newPassword']").val()!==$("input[name='passwordConfirm']").val()){
                    $.edbox({ warning: 'Password and Confirm Password inconsistent!' });
                    return;
                }
                $.ajax({
                    url: "${pageContext.request.contextPath}/emp/update_password.do",
                    data: {
                        "oldPassword": $("input[name='oldPassword']").val(),
                        "newPassword": $("input[name='newPassword']").val()
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(result) {
                        if(result.status === 1) {
                            $.edbox({ success: 'Password update success!' });
                            clearPassword();
                        }else {
                            $.edbox({ warning: result.msg });
                        }
                    },
                    error: function() {
                        $.edbox({ danger: 'Password update failed!' });
                    }
                });
            });
            
            function clearPassword() {
                $("input[name='oldPassword']").val("");
                $("input[name='newPassword']").val("");
                $("input[name='passwordConfirm']").val("");
            }
	</script>
    </body>
</html>
